<template>
  <div class="left-bar">
    <Icon class="logo" type="logo-instagram" size="24" />
    <Divider type="vertical" />
    <import-Json></import-Json>
    <import-file></import-file>
  </div>

  <div class="left-center_bar" ref="elementRef" :style="{ top: state.top }">
    <LeftCenter />
  </div>

  <div class="right-bar">
    <RightTop />
  </div>
  <div class="right-center">
    <!-- <RightCenter /> -->
    <Right />
  </div>
  <div class="right-bottom">
    <dragMode></dragMode>
    <div style="width: 10px"></div>
    <zoom></zoom>
  </div>

  <!-- 选中的浮动操作条 -->
  <selectedBar />
</template>

<script name="toolbar" setup lang="ts">
import { ref, watch } from 'vue';

import importJson from '@/components/importJSON.vue';
import importFile from '@/components/importFile.vue';

import LeftCenter from '../LeftCenter/index.vue';
// import RightCenter from '../RightCenter/index.vue';
import Right from '../right/index.vue';
import RightTop from '../RightTop/index.vue';

import zoom from '@/components/zoom.vue';
import dragMode from '@/components/dragMode.vue';
// 选中的操作条
import selectedBar from '@/components/selectBar.vue';

const state = reactive({
  show: false,
  top: '10%',
});
const elementRef = ref(null);

onMounted(() => {
  if (elementRef.value) {
    calculateDimensions(elementRef.value.offsetHeight);
  }
});

watch(elementRef, (el) => {
  if (el) {
    console.log(el.offsetHeight); // 更新高度值
    calculateDimensions(el.offsetHeight);
  }
});

const calculateDimensions = (height) => {
  const screenHeiht = window.innerHeight;
  state.top = (screenHeiht - height) / 2 + 'px';
};
</script>

<style lang="less" scoped>
.left-bar,
.right-bar,
.left-center_bar,
.right-bottom,
.right-center {
  position: absolute;

  border: 1px solid var(--color--border-float);
  background-color: var(--color--bg-float);
  box-shadow: var(--shadow-m);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  align-items: center;

  .logo {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
  }
}

.left-bar {
  top: 10px;
  left: 10px;
  height: 44px;
}
.left-center_bar {
  left: 10px;
  top: 10%;
  width: 48px;
  padding: 0;
  transition: all 0.3s ease-in-out;
}

.right-bar {
  top: 10px;
  right: 10px;
  height: 44px;
}

.right-center {
  right: 10px;
  top: 10%;
  /* width: 300px; */
  padding: 0;
  transition: all 0.3s ease-in-out;
}

.right-bottom {
  bottom: 10px;
  right: 10px;
  height: 44px;
  padding: 0 8px 0 16px;
}
</style>
